<template>
  <div id="container" class="scatter"></div>
</template>

<script>
import dataApi from "@/api/data";
export default {
  props:{
    child_yLabel:String,
    child_circleAreaLabel:String,
    child_intensityLabel:String,
  },
  data() {
    return {
      yLabel:'',
      circleAreaLabel:'',
      intensityLabel:'',
      chart: null,
      items:[],
      data_2013: [],
      data_2014: [],
      data_2015: [],
      data_2016: [],
      data_2017: [],
      data_2018: [],
      option: {},
    };
  },
  mounted() {
    this.preProcessData();
    
  },
  methods: {
    resizeChart(){
        this.chart.resize()
    },
     getMax(col){
        let max = Number.MIN_VALUE
        for (let i = 0; i < this.items.length; i++) {
            if(Number(this.items[i][col]) > max){
                max = Number(this.items[i][col])
            }
        }
        //console.log('最大  '  + max);
        return max
    },
    getMin(col){
        let min = Number.MAX_VALUE
        for (let i = 0; i < this.items.length; i++) {
           if(Number(this.items[i][col]) < min){
               min = Number(this.items[i][col])
           }
        }
        //console.log('最小 ' + min);
        return min;
    },
    //   模拟后台处理数据，接入后台后此函数将弃用
    preProcessData() {
     // 获取2013年数据
      dataApi.getData().then((res) => {
        var items = res.data.items;
        this.items = items
        // console.log(items);
        // console.log(res.data.items);
        for (let i = 0; i < items.length; i++) {
          if (items[i]["年份"] === "2013") {
            this.data_2013.push([
              //cityMap[items[i]['city'].replace(/\s+/g,"")], // x轴
              items[i]["city"].replace(/\s+/g, ""),
              Number(items[i]["森林覆盖率"]), // y 轴
              Number(items[i]["天然林面积"]), // 圆面积
              Number(items[i]["人工林面积"]),
            ]);
          } else if (items[i]["年份"] === "2014") {
            this.data_2014.push([
              //cityMap[items[i]['city'].replace(/\s+/g,"")], // x轴
              items[i]["city"].replace(/\s+/g, ""),
              Number(items[i]["森林覆盖率"]), // y 轴
              Number(items[i]["天然林面积"]), // 圆面积
              
              Number(items[i]["人工林面积"]),
            ]);
          } else if (items[i]["年份"] === "2015") {
            this.data_2015.push([
              //cityMap[items[i]['city'].replace(/\s+/g,"")], // x轴
              items[i]["city"].replace(/\s+/g, ""),
              Number(items[i]["森林覆盖率"]), // y 轴
              Number(items[i]["天然林面积"]), // 圆面积
              Number(items[i]["人工林面积"]),
            ]);
          } else if (items[i]["年份"] === "2016") {
            this.data_2016.push([
              //cityMap[items[i]['city'].replace(/\s+/g,"")], // x轴
              items[i]["city"].replace(/\s+/g, ""),
              Number(items[i]["森林覆盖率"]), // y 轴
              Number(items[i]["天然林面积"]), // 圆面积
              Number(items[i]["人工林面积"]),
            ]);
          } else if (items[i]["年份"] === "2017") {
            this.data_2017.push([
              //cityMap[items[i]['city'].replace(/\s+/g,"")], // x轴
              items[i]["city"].replace(/\s+/g, ""),
              Number(items[i]["森林覆盖率"]), // y 轴
              Number(items[i]["天然林面积"]), // 圆面积
              Number(items[i]["人工林面积"]),
            ]);
          } else if (items[i]["年份"] === "2018") {
            this.data_2018.push([
              //cityMap[items[i]['city'].replace(/\s+/g,"")], // x轴
              items[i]["city"].replace(/\s+/g, ""),
              Number(items[i]["森林覆盖率"]), // y 轴
              Number(items[i]["天然林面积"]), // 圆面积
              Number(items[i]["人工林面积"]),
            ]);
          }
        }
        this.initChart();
       
      });
    },
    // 初始化可视化视图
    initChart() {
      let dom = document.getElementById("container");
      this.chart = this.$echarts.init(dom);
      this.setChart();
      this.chart.setOption(this.option);
      window.addEventListener("resize",()=>{
        let width = parseInt(document.body.clientWidth)
        if(width > 600){
          this.resizeChart()
        }
         
      })
    },
    // 配置可视化表项
    setChart() {
      var schema = [
        { name: "year", index: 0, text: "年" },
        { name: "森林覆盖率", index: 2, text: "森林覆盖率" },
        { name: "天然林面积", index: 3, text: "天然林面积" },
        { name: "人工林面积", index: 4, text: "人工林面积" },
      ];

      var itemStyle = {
        opacity: 0.59,
      };

      var cities = ["","北京","天津","河北","山西","内蒙古","辽宁","吉林","黑龙江","上海","江苏","浙江","安徽",
      "福建","江西","山东","河南","湖北","湖南","广东","广西","海南","重庆","四川","贵州","云南","西藏","陕西",
      "甘肃","青海","宁夏","新疆",
      ];

      this.option = {
        //backgroundColor: "#404a59",
         title: {
           bottom:'0',
          text: " 全\n国\n森\n林\n资\n源\n情\n况\n散\n点\n分\n析\n图\n",
          textStyle:{
            fontSize:'48'
          },
          left: "right",
          orient:'vertical'
        },
        color: [
          "#dd4444",
          "#9400d3",
          "#adff2f",
          "#fec42c",
          "#80F1BE",
          "#095fff",
        ],
        legend: {
          top:100,
          data: ["2013", "2014", "2015", "2016", "2017", "2018"],
          selected: { "2013":true,"2014":true, "2015":true, "2016":false, "2017":false, "2018":false},
          textStyle: {
            color: "#222",
            fontSize: 16,
          },
        },
        grid: {
          left: "10%",
          right: 150,
          top: "18%",
          bottom: "10%",
        },
        tooltip: {
          padding: 10,
          backgroundColor: "#222",
          borderColor: "#777",
          borderWidth: 1,
          formatter: function (obj) {
            var value = obj.value;
            return (
              '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
              value[0] +
              ": " +
              obj.seriesName +
              "年" +
              "</div>" +
              schema[1].text +
              "：" +
              value[1] +
              "<br>" +
              schema[2].text +
              "：" +
              value[2] +
              "<br>" +
              schema[3].text +
              "：" +
              value[3] +
              "<br>"
            );
          },
        },
        xAxis: {
          name: "地区",
          type: "category",
          data: cities,
          boundaryGap: false,
          axisLabel: {
            interval: 0,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#999",
              type: "dashed",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#222",
            },
            
          },
        },

        yAxis: {
          type: "value",
          name: "森林覆盖率(%)",
          nameTextStyle: {
            color: "#222",
            fontSize: 24,
          },
          axisLine: {
            lineStyle: {
              color: "#222",
            },
          },
          splitLine: {
            show: false,
          },
        },
        visualMap: [
          {
            top:'30',
            right:'0',
            dimension: 2,
            min: this.getMin("天然林面积") ,
            max: this.getMax("天然林面积") ,
            itemWidth: 30,
            itemHeight: 120,
            calculable: true,
            precision: 0.1,
            text: ["圆形大小：天然林面积(万公顷)"],
            textGap: 30,
            orient: "horizontal",
            textStyle: {
              color: "#222",
              fontSize:'14'
            },
            inRange: {
              symbolSize: [10, 70],
            },
            outOfRange: {
              symbolSize: [10, 70],
              color: ["rgba(255,255,255,.2)"],
            },
            controller: {
              inRange: {
                color: ["#c23531"],
              },
              outOfRange: {
                color: ["#444"],
              },
            },
          },
          {
            left:'0%',
            top: "30",
            dimension: 3,
            min: this.getMin("人工林面积"),
            max: this.getMax("人工林面积"),
            itemHeight: 120,
            calculable: true,
            precision: 0.1,
            text: ["明暗:人工林面积(万公顷)"],
            textGap: 15,
            orient: "horizontal",
            textStyle: {
              color: "#222",
              fontSize:'14'
            },
            inRange: {
              colorLightness: [0.1, 0.9],
            },
            outOfRange: {
              color: ["rgba(255,255,255,.2)"],
            },
            controller: {
              inRange: {
                color: ["#c23531"],
              },
              outOfRange: {
                color: ["#444"],
              },
            },
          },
        ],
        dataZoom:[{
 　　　　   type: 'slider',//图表下方的伸缩条
 　　　　   show : true, //是否显示
 　　　　   realtime : true, //拖动时，是否实时更新系列的视图
 　　　　   start : 0, //伸缩条开始位置（1-100），可以随时更改
 　　　　   end : 30, //伸缩条结束位置（1-100），可以随时更改
 　　　 }],
        series: [
          {
            name: "2013",
            type: "scatter",
            itemStyle: itemStyle,
            data: this.data_2013,
          },
          {
            name: "2014",
            type: "scatter",
            itemStyle: itemStyle,
            data: this.data_2014,
          },
          {
            name: "2015",
            type: "scatter",
            itemStyle: itemStyle,
            data: this.data_2015,
          },
          {
            name: "2016",
            type: "scatter",
            itemStyle: itemStyle,
            data: this.data_2016,
          },
          {
            name: "2017",
            type: "scatter",
            itemStyle: itemStyle,
            data: this.data_2017,
          },
          {
            name: "2018",
            type: "scatter",
            itemStyle: itemStyle,
            data: this.data_2018,
          },
        ],
      };
    },
  },
};
</script>

<style>
.scatter {
  width: 60%;
  height: 800px;
}
</style>